import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import {Icon} from 'weaver-mobile';
import RecordView from './RecordView';
import classnames from 'classnames';

@withRouter
@observer
export default class RecordList extends Component {
  render() {
    const {store, resourceId} = this.props;
    const {viewType} = store;
    const className = classnames({
      viewType: true,
      'viewType-list': viewType == 0,
      'viewType-map': viewType == 1
    })

    return (
      <div className='tabPane content mine' style={this.props.style}>
        <RecordView store={store} resourceId={resourceId}/>
        <div className={className} onClick={() => store.viewType = (viewType == 0 ? 1 : 0)}>
            <Icon type={viewType == 0 ? 'attendance-map' : 'attendance-time'} size='lg' color='#fff'/>
        </div>
      </div>
    )
  }
}